
<template>
    <div class="profile-cont">
        <el-tabs 
            v-model="activeTab"
            @tab-click="handleTab"
        >   
            <el-tab-pane label="个人资料" name="first">
                <div class="tab-cont">
                    <div class="mt20 flex">
                        <div class="user-img">
                            <img :src="userForm.picture" class="img100">
                        </div>
                        <div class="ml30">
                            <div class="flex ali-c">
                                <input 
                                    v-model="userForm.nickName.value"
                                    :disabled="userForm.nickName.disabled"
                                    placeholder="昵称"
                                    class="user-input"
                                    :class="{'border':!userForm.nickName.disabled}"/>
                                <i class="el-icon-edit-outline profile-edit" @click="userForm.nickName.disabled=!userForm.nickName.disabled"></i>  
                            </div>
                            <el-popover
                                placement="bottom-start"
                                width="508"
                                trigger="hover"
                            >
                                <div class="modify-avatar">
                                    <h3 class="fs14">默认头像</h3>
                                    <div class="mt25 flex ali-c">
                                        <div class="avatar-list">
                                            <div class="avatar-img">
                                                <img src="@/static/images/default_tx1.png" class="img100">
                                            </div>
                                            <div class="avatar-img">
                                                <img src="@/static/images/default_tx2.png" class="img100">
                                            </div>
                                            <div class="avatar-img">
                                                <img src="@/static/images/default_tx3.png" class="img100">
                                            </div>
                                            <div class="avatar-img">
                                                <img src="@/static/images/default_tx4.png" class="img100">
                                            </div>
                                        </div>
                                        <div class="avatar-upload flex ali-c jus-a">
                                            <el-upload
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                :show-file-list="false"
                                                :on-success="handleAvatarSuccess"
                                                :before-upload="beforeAvatarUpload">
                                                <button class="com-full-btn ml35" style="font-size:12px">本地上传</button>
                                            </el-upload>
                                        </div>
                                    </div>
                                </div>
                                <button class="user-btn mt15" slot="reference">修改头像</button>
                            </el-popover>
                        </div>
                    </div>
                    <div class="vip-label flex ali-c">
                        <img src="../../static/images/pay_year.png" class="vip-icon">
                        <div class="vip-txt">尊敬的VIP用户，有效期：2021-12</div>
                        <button class="vip-btn red">立即续费</button>
                    </div>
                    <ul class="profile-list">
                        <li>    
                            <div class="first-label">性别</div>
                            <el-select 
                                v-model="userForm.sex" 
                                placeholder="请选择"
                                class="first-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in sexList"
                                    :key="item"
                                    :label="item"
                                    :value="item"
                                >
                                </el-option>
                            </el-select>
                        </li>
                        <li>    
                            <div class="first-label">年龄</div>
                            <input 
                                v-model="userForm.age.value"
                                placeholder="暂无，请填写您的年龄"
                                :disabled="userForm.age.disabled"
                                class="first-input"
                                :class="{'border':!userForm.age.disabled}"/>
                            <i class="el-icon-edit-outline profile-edit" @click="userForm.age.disabled=!userForm.age.disabled"></i>  
                        </li>
                        <li>    
                            <div class="first-label">邮箱</div>
                            <input 
                                v-model="userForm.email.value"
                                placeholder="暂无，请填写您的邮箱"
                                :disabled="userForm.email.disabled"
                                class="first-input"
                                :class="{'border':!userForm.email.disabled}"/>
                            <i class="el-icon-edit-outline profile-edit" @click="userForm.email.disabled=!userForm.email.disabled"></i>  
                        </li>
                        <li>    
                            <div class="first-label">个人介绍</div>
                            <input 
                                v-model="userForm.summary.value"
                                placeholder="暂无，请填写您的个人介绍"
                                :disabled="userForm.summary.disabled"
                                class="first-input"
                                :class="{'border':!userForm.summary.disabled}"/>
                            <i class="el-icon-edit-outline profile-edit" @click="userForm.summary.disabled=!userForm.summary.disabled"></i>
                        </li>
                        <li>    
                            <div class="first-label">机构名称</div>
                            <input 
                                v-model="userForm.company.value"
                                placeholder="暂无，请填写机构名称"
                                :disabled="userForm.company.disabled"
                                class="first-input"
                                :class="{'border':!userForm.company.disabled}"/>
                            <i class="el-icon-edit-outline profile-edit" @click="userForm.company.disabled=!userForm.company.disabled"></i>
                            <button 
                                class="com-full-btn" 
                                style="font-size:12px;height:20px;line-height:20px;margin-left:260px"
                                @click="onFormSubmit"
                            >提交</button> 
                            <button 
                                class="com-plain-btn ml25"
                                style="font-size:12px;height:20px;line-height:20px"
                                @click="onFormClose"
                            >关闭</button> 
                        </li>
                        <li>    
                            <div class="first-label">职业</div>
                            <input 
                                v-model="userForm.duties.value"
                                placeholder="暂无，请填写您的职业"
                                :disabled="userForm.duties.disabled"
                                class="first-input"
                                :class="{'border':!userForm.duties.disabled}"/>
                            <i class="el-icon-edit-outline profile-edit" @click="userForm.duties.disabled=!userForm.duties.disabled"></i>
                        </li>
                        <li>    
                            <div class="first-label">地址</div>
                            <input 
                                v-model="userForm.address.value"
                                placeholder="暂无，请填写您的地址"
                                :disabled="userForm.address.disabled"
                                class="first-input"
                                :class="{'border':!userForm.address.disabled}"/>
                            <i class="el-icon-edit-outline profile-edit" @click="userForm.address.disabled=!userForm.address.disabled"></i> 
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
            <el-tab-pane label="账户及安全设置" name="second">
                <div class="tab-cont">
                    <ul class="safe-list mt30">
                        <li>
                            <div class="flex ali-c">
                                <div class="fs16">绑定手机</div>  
                                <input v-model="userForm.bandPhone" disabled placeholder="请输入手机号" class="second-input"/>
                                <!-- <i class="el-icon-edit-outline profile-edit"></i>   -->
                            </div>
                        </li>
                        <li>
                            <div class="fs16">绑定第三方账户</div>
                            <div class="bandle-wx">
                                <div class="wx-img">
                                    <img src="../../static/images/pay_wx.png" class="img100" />
                                </div>
                                <div class="ml30">
                                    <div class="fs14">绑定微信<span class="fs12 c999">（未绑定）</span></div>
                                    <div class="fs12 cp mt2" style="color:#F56060">绑定</div>
                                </div>
                            </div>   
                        </li>
                        <li>
                            <div class="flex ali-c">
                                <div class="fs16">账户注销</div>  
                                <input 
                                    v-model="userForm.cancell.value"
                                    placeholder="清空个人账户信息，请谨慎操作"
                                    :disabled="userForm.cancell.disabled"
                                    class="second-input"
                                    :class="{'border':!userForm.cancell.disabled}"/>
                                <i class="el-icon-edit-outline profile-edit" @click="userForm.cancell.disabled=!userForm.cancell.disabled"></i> 
                            </div>
                        </li>
                    </ul>
                </div>
            </el-tab-pane>
        </el-tabs>
        
    </div>
</template>

<script>
export default {
    name: "profile",
    components:{
       
    },
    computed: {
        token(){
            return this.$store.getters.token;
        },
        userInfo:{
            get() {
                return this.$store.getters.userInfo;
            },
            set(val) {},
        },
    },
    data() {
        return {
            activeTab: 'first',
            imgUser:"",
            sexList: ['男','女','保密'],
            userForm:{
                nickName:{disabled:true,value:""},
                picture:"",
                sex:"",
                age:{disabled:true,value:""},
                email:{disabled:true,value:""},
                summary:{disabled:true,value:""},
                company:{disabled:true,value:""},
                duties:{disabled:true,value:""},
                address:{disabled:true,value:""},
                bandPhone:"",
                bandWx: null,
                cancell:{disabled:true,value:""},
            },
        };

    },
    methods: {
        setUserInfo(val){
            this.$store.dispatch("setUserInfo", val);
        },
        setToken(val){
            this.$store.dispatch("setToken", val);
        },
        handleTab(tab, event) {
            // console.log(tab, event);
        },
        handleAvatarSuccess(res, file) {
            this.imgUser = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        onFormSubmit(){
            let that = this;
            let data = `nick_name=${this.userForm.nickName.value}&sex=${this.userForm.sex}&date_of_birth=${this.userForm.age.value?Number(that.moment(Date.now()).format('YYYY'))-Number(this.userForm.age.value)+'-01-01':that.moment(Date.now()).format('YYYY-MM-DD')}&email=${this.userForm.email.value}&summary=${this.userForm.summary.value}&company=${this.userForm.company.value} &duties=${this.userForm.duties.value}&address=${this.userForm.address.value}`;
            this.request.submitDesc(data, function (res) {
                if (res.code == "0"&&res.message=='success') {
                    that.toast.success('修改成功');
                    that.getUserInfo();
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        getUserInfo(){
            let that = this;
            this.request.getUserInfo({}, function (res) {
                if (res.code == "0") {
                    let resData = res.data;
                    let userInfo = {
                        publisher:that.$store.getters.userInfo.publisher,
                        expire_time:resData.expire_time,
                        token:resData.token,
                        user:resData.user
                    }
                    that.userForm.nickName.value = resData.user.nick_name;
                    that.userForm.picture = resData.user.picture_absolute?resData.user.picture_absolute:require('@/static/images/default_tx.png');
                    that.userForm.sex = resData.user.sex;
                    if(resData.user.date_of_birth){
                        that.userForm.age.value = Number(that.moment(Date.now()).format('YYYY'))- Number(resData.user.date_of_birth.split("-")[0]);
                    }
                    that.userForm.email.value = resData.user.email!='null'?resData.user.email:'';
                    that.userForm.summary.value = resData.user.summary!='null'?resData.user.summary:'';
                    that.userForm.company.value = resData.user.company!='null'?resData.user.company:'';
                    that.userForm.duties.value = resData.user.duties!='null'?resData.user.duties:'';
                    that.userForm.address.value = resData.user.address!='null'?resData.user.address:'';
                    that.userForm.bandPhone = resData.user.phone!='null'?resData.user.phone:'';
                    that.userForm.bandWx = resData.user.third_weixin!='null'?resData.user.third_weixin:'';
                    that.userForm.cancell.value = '';
                    that.userForm.nickName.disabled = true;
                    that.userForm.age.disabled = true;
                    that.userForm.email.disabled = true;
                    that.userForm.summary.disabled = true;
                    that.userForm.company.disabled = true;
                    that.userForm.duties.disabled = true;
                    that.userForm.address.disabled = true;
                    that.userForm.cancell.disabled = true;
                    that.setUserInfo(that.stringutils.deepClone(userInfo));
                    that.setToken(resData.token);
                } else {
                    that.toast.error(res.message);
                }
            });
        },
        onFormClose(){},
    },
    mounted(){
        console.log(this.userForm);
    },
    created() {
        this.getUserInfo();
    },
    
    

};
</script>

<style lang="stylus" scoped>
.profile-cont
    width 100%
    min-height 600px
    /deep/.el-tabs__header
        background #fff
        margin 0
    /deep/.el-tabs__active-bar
        background #3266CC
        height 3px
    /deep/.el-tabs__item
        padding 0 38px !important
        font-size 16px
        height 45px
        line-height 50px
        color #333
    /deep/.el-tabs__item.is-active
        color: #3266CC;
        font-weight bolder
    /deep/.stomStyle .el-input__inner
        background #F2F4F6
    .tab-cont
        width 100%
        padding 0 50px
        .user-btn
            cursor pointer
            height 24px
            line-height 22px
            font-size 12px
            color #333
            padding 0 16px
            border 1px solid #DEE1E8
            border-radius 4px
            &:hover
                color #fff
                background #3266CC
        .user-input
            width 75px
            margin-right 10px
            height 28px
            padding-left 3px
            font-size 18px
            color #333
            font-weight bolder
            border none
            &.border
                border 1px solid #DEE1E8
            &::-webkit-input-placeholder
                color #666
                font-size 12px
            &:disabled
                opacity 1
        .user-img
            flex-shrink 0
            width 94px
            height 94px
            border 1px solid #DEE1E8
            overflow hidden
            border-radius 50%
            background #DEE1E8
        .vip-label
            margin-top 24px
            width 542px
            height 50px
            padding 10px 12px
            border-radius 4px
            border 1px solid #DEE1E8
            .vip-icon
                width 20px  
                height 19px
                flex-shrink 0
                margin-left 10px
            .vip-txt
                margin-left 15px
                width 355px
                font-size 14px
            .vip-btn
                flex-shrink 0
                width 116px
                height 30px
                border-radius 4px
                font-size 15px
                color #fff
                &.red
                    background #F56060
        .profile-list>li
            display flex
            align-items center
            margin-top 24px
            .first-label
                width 82px
                font-size 14px
            .first-input
                width 200px
                margin-right 20px
                height 22px
                padding 0 8px
                font-size 12px
                color #666
                border none
                &.border
                    border 1px solid #DEE1E8
                &::-webkit-input-placeholder
                    color #666
                    font-size 12px
                &:disabled
                    opacity 1
            /deep/.first-select .el-input__inner 
                width 235px
                height 22px
                padding 0 8px
                font-size 12px
                border 1px solid #DEE1E8
            /deep/.first-select .el-input__icon
                line-height 22px
                font-size 12px
                color #000
                font-weight bolder
            /deep/.first-select .el-input__suffix
                right 2px
            /deep/.first-select .el-input__inner::-webkit-input-placeholder
                color #666
                font-size 12px
            /deep/.first-select .el-select-dropdown__item
                font-size 12px
        .profile-edit
            color #3266CC
            font-size 14px
            cursor pointer
            &:hover
               color #2A58B1
               font-weight bolder
        .safe-list li
            padding 15px 10px
            border-top 1px dashed rgba(50, 102, 204, 0.3)
            .second-input
                width 250px
                height 22px
                padding 0 10px
                font-size 14px
                color #666
                border none
                margin 0 20px
                &.border
                    border 1px solid #DEE1E8
                &::-webkit-input-placeholder
                    color #666
                    font-size 12px
                &:disabled
                    opacity 1
            .bandle-wx
                display flex
                align-items center
                width 242px
                height 81px
                padding 18px
                background rgba(50, 102, 204, 0.05)
                border-radius 4px
                margin-top 15px
                margin-bottom 25px
                .wx-img
                    flex-shrink 0
                    width 44px
                    height 44px       
</style>